@charset "UTF-8";
.page {
  height: 100%;
  background: linear-gradient(180deg, #00CC66 0%, #ffffff 40%, #f1f1f1f1 60%);
}

.seachbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  padding: 10px 10px 8px;
  background: linear-gradient(180deg, #00cc66 0%, rgba(0, 204, 102, 0.92) 70%, rgba(0, 204, 102, 0) 100%);
}

.customSearch {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
  border-radius: 20px;
  height: 36px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: width 0.2s ease, margin 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 上下切换占位文案动画层 */
.rollingPlaceholder {
  position: absolute;
  left: 42px;
  /* 搜索图标后 */
  color: #bfbfbf;
  pointer-events: none;
  animation: phSlide 0.35s ease both;
  font-size: 14px;
  line-height: 36px;
  margin-left: 10px;
}

@keyframes phSlide {
  from {
    transform: translateY(8px);
    opacity: .2;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.searchIcon {
  margin-right: 8px;
  color: #00CC66;
  font-size: 20px;
}

.searchInput {
  flex: 1;
  background-color: transparent;
  border: none;
  position: relative;
}

.searchBtn {
  width: 70px;
  background-color: #00CC66;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 6px 16px;
  cursor: pointer;
}

.searchSpacer {
  height: 64px;
}

.rightIcons {
  margin: 0 10px;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.rightIconBtn {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

/* 滚动后：隐藏右侧图标，搜索框占满宽度 */
.collapsed .customSearch {
  width: calc(100% - 20px);
  margin: 0 10px;
  border: 2px solid #6ad39f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.collapsed .rightIcons {
  display: none !important;
}

.headsetIcon {
  width: 22px;
  height: 22px;
}

.shoppGrid {
  --rv-grid-item-content-background-color: transparent;
}

.grid_item {
  width: 80px;
  height: 80px;
}

.grid_item .grid_image {
  width: 40px;
  height: 40px;
}

.grid_item p {
  font-size: 11px;
}

.wz {
  width: 100%;
  height: 90px;
}

.wz img {
  margin-top: 10px;
  margin-left: 15px;
  width: 350px;
  height: 80px;
  border-radius: 10px;
}

.userSkin {
  display: flex;
}

.userSkin img {
  width: 180px;
  height: 150px;
  margin: 0 3px;
  border-radius: 10px;
}

.userPhysical {
  display: flex;
  margin-top: 15px;
}

.userPhysical img {
  width: 120px;
  height: 100px;
  margin: 0 3px;
  border-radius: 10px;
}

/* 瀑布流布局 */
.waterfall {
  column-count: 2;
  column-gap: 10px;
  padding: 10px;
}

.waterItem {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.waterImg {
  width: 100%;
  height: auto;
  display: block;
}

.waterTitle {
  font-size: 14px;
  color: #222;
  padding: 6px 8px 0;
}

.waterPrice {
  color: #ff4d4f;
  font-weight: 600;
  padding: 4px 8px 8px;
}

.infiniteSentinel {
  height: 1px;
}

.cartFloat {
  position: fixed;
  right: 14px;
  bottom: calc(65px + env(safe-area-inset-bottom));
  /* 底部TabBar高度约60 */
  z-index: 2000;
  /* 圆形外观（若需要） */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FF9F41 0%, #FF8231 40%, #FC6D26 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* 有图片时让图片自适应居中 */
.cartFloaticon {
  width: 28px;
  height: 28px;
  color: #ffff;
}
